import React from 'react'
import Button from 'Component/Button'
import './index.scss'

const BottomButton = (props) => {
  const {
    multiple,
    okHandle,
    cancelHandle,
    cancelText,
    okText,
    disabled,
  } = props

  let buttons
  let classNames
  if (!multiple) {
    classNames = 'single-btn-wrap'
    buttons = (
      <Button
        title={okText}
        size="large"
        type="confirm"
        onClick={okHandle}
        disabled={disabled}
      />
    )
  } else {
    classNames = 'multiple-btn-wrap'
    buttons = (
      <div className="bottom-multiple-btn-wrap">
        { cancelText && cancelHandle &&
          <Button
            title={cancelText}
            type="cautious"
            onClick={cancelHandle}
          />
        }
        <Button
          title={okText}
          type="normal"
          onClick={okHandle}
        />
      </div>
    )
  }

  return (
    <div className={`bottom-btn-wrap bottom ${classNames}`}>
      {buttons}
    </div>
  )
}

BottomButton.propTypes = {
  multiple: React.PropTypes.bool,
  okText: React.PropTypes.string.isRequired,
  cancelText: React.PropTypes.string,
  okHandle: React.PropTypes.func.isRequired,
  cancelHandle: React.PropTypes.func,
  disabled: React.PropTypes.bool,
}

BottomButton.defaultProps = {
  multiple: false,
  cancelText: '',
  cancelHandle: () => {},
  disabled: false,
}

export default BottomButton

